<template>
    <Content title="保养大厅">
        <view class="maintenance-hall">
            <view class="action-box">
                <u-row justify="space-between" gutter="10" customStyle="margin-bottom: 10px">
                    <u-col span="6">
                        <MySelect v-model="search.deviceGrade" placeholder="请选择设备等级" :option="grade"
                            @change="onRefresh">
                        </MySelect>
                    </u-col>
                    <u-col span="6">
                        <MySelect v-model="search.taskLevel" placeholder="请选择保养级别" :option="levels" @change="onRefresh">
                        </MySelect>
                    </u-col>
                </u-row>

                <u-row justify="space-between" gutter="10" customStyle="margin-bottom: 10px">
                    <u-col span="6">
                        <u-input v-model="search.deviceName" class="input" placeholder="请输入设备名称" @change="onRefresh"
                            clearable></u-input>
                    </u-col>
                    <u-col span="6">
                        <u-input v-model="search.deviceNo" class="input" placeholder="请输入设备编号" @change="onRefresh"
                            clearable></u-input>
                    </u-col>
                </u-row>
            </view>

            <view class="header-box">
                <MyNavList :data="headerData" v-model="navIndex"></MyNavList>
            </view>

            <view class="main-box">
                <template v-if="data && data.length === 0">
                    <Empty></Empty>
                </template>
                <List ref="orderList" v-else :scrollNoData="scrollNoData" :data="data" :navIndex="search.taskStatus"
                    @ok="ok" @itemClick="itemClick" @onRefresh="onRefresh" @getList="getList"
                    @scrollBottom="scrollBottom"></List>
            </view>
        </view>
    </Content>

</template>

<script>
    import MySelect from "@/components/mySelect";
    import Content from "@/components/content/index.vue";
    import Empty from "@/components/empty";
    import List from "./components/list.vue";
    // import OperatorList from "./components/operator.vue";
    import MyNavList from "@/components/myNavList.vue";
    import fetch from "@/utils/fetch";
    import {
        setPageData
    } from "@/store/user";
    import search from "../../../uni_modules/uview-ui/libs/config/props/search";
    export default {
        components: {
            MySelect,
            Content,
            List,
            MyNavList,
            Empty,
            // OperatorList,
        },
        data() {
            return {
                search: {
                    deviceNo: "",
                    deviceName: "",
                    repairOrderNo: "",
                    repairedBy: "",
                    categoryName: "",
                    pageNum: 1,
                    pageSize: 10,
                    taskStatus: 0,
                },
                navIndex: 0,
                grade: [{
                        label: "A",
                        value: "A",
                    },
                    {
                        label: "B",
                        value: "B",
                    },
                    {
                        label: "C",
                        value: "C",
                    },
                ],
                levels: [{
                        label: '一级保养',
                        value: 1,
                    },
                    {
                        label: '二级保养',
                        value: "2",
                    },
                    {
                        label: '三级保养',
                        value: "3",
                    },
                ],
                headerData: [{
                        label: "待分配",
                        status: 0,
                    },
                    {
                        label: "保养中",
                        status: 2,
                    },
                    {
                        label: "待确认",
                        status: 3,
                    },
                    {
                        label: "已结单",
                        status: 4,
                    },
                    {
                        label: "已过期",
                        status: 5,
                    },
                ],
                data: [],
                scroll: false,
                scrollNoData: false,
                isReady: true,
            };
        },
        watch: {
            navIndex(newValue, oldValue) {
                this.search.taskStatus = this.headerData[newValue].status;
                this.getList(true);
            },
        },
        onShow: function() {
            if (this.isReady) return;
            this.getList(true);
        },
        mounted() {
            uni.setStorage("getSelectLists", {});
        },
        onReady: function() {
            this.isReady = false;
            this.getList(true);
        },
        methods: {
            onRefresh() {
                this.$loading.open();
                this.getList(true);
            },
            ok() {},
            itemClick() {},
            scrollBottom(next) {
                const that = this;
                if (!that.scrollNoData) {
                    that.search.pageNum = that.search.pageNum + 1;
                    that.scroll = true;
                    that.getList().then(() => {
                        next(that.scrollNoData);
                    });
                    return;
                }
                next();
            },
            getList(arg) {
                const that = this;
                that.$loading.open();
                if (arg) {
                    that.search.pageNum = 1;
                    that.scroll = false;
                    that.scrollNoData = false;
                    that.data = [];
                }
                console.log("that.search", that.search);
                return fetch("post", "/dms/dcmMaintainTask/list", that.search).then(
                    ({
                        data
                    }) => {
                        if (that.scroll) {
                            if ((data?.records || []).length === 0) {
                                that.scrollNoData = true;
                            } else {
                                that.data.push(...data?.records);
                            }
                        } else {
                            that.data = data?.records || [];
                        }
                        that.$loading.close();
                    }
                );
            },
        },
    };
</script>

<style scoped lang="scss">
    .maintenance-hall {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .header-box {
        display: flex;
        overflow: auto;
        padding: 0 20px;
        margin-bottom: 10px;
        background-color: #ffffff;

        .header-box-item {
            flex: 1;
            width: 100px;
            min-width: 100px;
            height: 40px;
            line-height: 40px;
            border: 1px solid #e0e0e0;
            text-align: center;
        }
    }

    .action-box {
        width: 100%;
        padding: 10px 20px;
        margin-bottom: 10px;
        background-color: #ffffff;
    }

    .main-box {
        flex: 1;
        overflow: auto;
    }
</style>